import * as THREE from 'three'
// 引入fbx模型加载库FBXLoader
//import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader.js'
// 移动旋转
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
// 可视化变换控件引入
import {TransformControls} from "three/examples/jsm/controls/TransformControls.js"//三维坐标轴
//-----------------------

//------------
var transformControl;

var renderer, scene, camera, controls, timer;
var width, height;

// 初始化渲染器 Renderer
function initRenderer() {
    width = document.getElementById("container").clientWidth;
    height = document.getElementById("container").clientHeight;
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
        // canvas: document.getElementById('box')
    });/*生成渲染器对象（属性：抗锯齿效果为设置有效）*/
    renderer.setSize(width, height);
    document.getElementById("container").appendChild(renderer.domElement);
    /*设置canvas背景色(clearColor)和背景色透明度（clearAlpha）必须设置alpha:true 再WebGLRenderer中 */
    renderer.setClearColor(0x00ff00, 0.0); //设置背景颜色
}

// 初始化场景 Scene
function initScene() {
    scene = new THREE.Scene();
    // // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
    // var axisHelper = new THREE.AxisHelper(120);
    // scene.add(axisHelper);
}

// 初始化相机 Camera
function initCamera() {
    // PerspectiveCamera 透视摄像机 四个参数：视野角度（fov）,长宽比（aspect ratio）、近切面（near）、远切面（far）
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
    //定义camera的位置 相机角度
    // (x,y,z)x:负数为向左、正数为向右，y：负数为向下、正数为向上，z：负数越大离得越远、正数越大离得越远（两者方向相反）
    // camera.position.set(-30, 0, 60);
    camera.translateZ(700)
    //这里的lookAt函数是将视角指定为看原点
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);
    // camera=new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
    // //将camera添加到scene中
    // scene.add(camera);
}

//可视化变换控件对象
function initTransformControls() {
    transformControl = new TransformControls(camera, renderer.domElement);
    scene.add(transformControl);//控件对象添加到场景对象
}

// 初始化光源light
function initLight() {
    //环境光
    var ambient = new THREE.AmbientLight(0xFFFFFF);
    scene.add(ambient);
}

// 相机空间
function initcontrols() {
    controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set(0, 0.5, 0);
    controls.update();
    controls.enablePan = false;
    controls.enableDamping = true;
}

//2d文字精灵图
function init2DSpriteFont() {
    makeTextPlaneMate2('小可爱').then(function (m) {
        let sprite = new THREE.Sprite(m);
        sprite.position.set(145, 11.5864898576271, -135);
        sprite.scale.set(-461.55739713473173, -535.010759450665, -6.212728214410121);
        sprite.name = 'guang'
        scene.add(sprite);
        transformControl.attach(sprite);
    })
}

function makeTextPlaneMate2(text1) {
//绘制画布做为Sprite的材质
    var canvasText = document.createElement("canvas");
    canvasText.width = 700;
    canvasText.height = 700;
    var ctx = canvasText.getContext("2d");
//添加背景图片，进行异步操作
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.src = "/static/logo.png";
        //图片加载之后的方法
        img.onload = () => {
            //将画布处理为透明
            // ctx.clearRect(0, 0, 300, 300);
            //绘画图片
            ctx.drawImage(img, 0, 0, 300, 150);

            resolve(makeText(ctx, canvasText, text1))
        };
        //图片加载失败的方法
        img.onerror = (e) => {
            reject(e)
        }
    });
}

function makeText(ctx, canvas, text1) {
//文字
    const x = 10;
    const y = 50
    ctx.font = "40px Arial";
    ctx.fillText(text1, x, y);

    let texture = new THREE.CanvasTexture(canvas);
// let picaizhi=new THREE.SpriteMaterial({ map: texture });
    return new THREE.SpriteMaterial({map: texture});
}

// 全部加载
function threeExcute() {
    //初始化渲染器
    initRenderer();
    //初始化场景
    initScene();
    //初始化照相机
    initCamera();
    initTransformControls()
    //初始化光源
    initLight();
    //相机空间
    initcontrols();
    init2DSpriteFont()

}

var animate = function () {
    timer = requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
    // console.log(xPosition,'-xPosition');
    // let obj =scene.getObjectByName ("guang")
    // if (obj) {
    //     obj.position.x=xPosition
    // }

};

function FnDestroy() {
    cancelAnimationFrame(timer)
    transformControl = null
    renderer = null
    scene = null
    camera = null
    controls = null
    width = null
    height = null
}

export {
    threeExcute,
    animate,
    FnDestroy
}
